<template>
  <div>
    <con-title :topTitle="topTitle" />
    <el-card class="box-card">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="name">
          <span>测量名称 </span>
          <el-input placeholder="请输入测量名称" class="input_w" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="unit">
          <span>测量单位 </span>
          <el-input placeholder="请输入测量单位" class="input_w" v-model="ruleForm.unit"></el-input>
        </el-form-item>
        <el-form-item class="btn_left">
          <el-button type="primary" @click="dialogVisible = true">确定</el-button>
          <el-button type="primary">取消</el-button>
        </el-form-item>
        <!-- 弹窗 -->
        <el-dialog title="添加群组信息" :visible.sync="dialogVisible" width="30%">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleOK">确 定</el-button>
          </span>
        </el-dialog>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $meaAdd, $meaList } from "@/api/index.js";
export default {
  components: { ConTitle },
  name: "MeasurementAdd",
  data() {
    return {
      topTitle: {
        type: "子账号",
        text: "添加子账号",
        msg: "展示——————————————————————",
      },
      dialogVisible: false,
      groupList: [],
      ruleForm: {
        name: "",
        unit:''
      }, //需要提交的表单项
      rules: {
        name: [
          { required: true, message: "请输入测量名称", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" }
        ],
        unit: [
          { required: true, message: "请输入测量单位", trigger: "blur" },
        ]
      }, //需要验证的表单项
    };
  },
  methods: {
    getmeaList() {
      $meaList(this.ruleForm).then((res) => {
        // console.log(res);
        this.groupList = res.data.data;
        this.total = res.data.total;
      });
    },
    handleOK() {
      console.log("弹窗需要关闭，添加一条记录");
      //2.调用添加接口
      this.dialogVisible = false;
      $meaAdd({ name: this.ruleForm.name ,unit:this.ruleForm.unit}).then((res) => {
        console.log(res);
        if (res.data.msg == "success") {
          //成功添加
          this.getmeaList();
        }
      });
    },
  }
};
</script>

<style lang='scss' scoped>
.box-card {
  margin: 10px;
}
.input_w {
  width: 200px;
}
.btn_left {
  margin-left: 60px;
}
</style>